import { defineComponent } from 'vue';
import './AttrsSearch.less';
import { Popup } from 'vant';
import setting from '/@/settings/projectSetting';
import { CardListQuery } from '/@/api/gateruler/model/cardModel';
import { useVModels } from '@vueuse/core';
import { useOptions } from '/@/views/gateruler/hooks/useOptions';
import { includes, indexOf } from 'lodash-es';

export default defineComponent({
  name: 'AttrsSearch',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    queryState: {
      type: Object as PropType<CardListQuery>,
      required: true,
    },
  },
  emits: ['update:show', 'pageRefresh'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const { attrsOptions } = useOptions();

    const attrsClick = (item: string) => {
      const { queryState } = props;
      const selectValue = item;
      if (includes(queryState.attrs, selectValue)) {
        const index = indexOf(queryState.attrs, selectValue);
        queryState.attrs?.splice(index, 1);
      } else {
        queryState.attrs?.push(selectValue);
      }
      emit('pageRefresh');
    };

    return () => (
      <Popup
        class='gateruler-search-attrs-popup'
        v-model={[show.value, 'show']}
        style={{ width: '82%', height: '76%', top: '58%', background: '#F9F9F9', zIndex: setting.PageTitleZIndex - 1 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 1 }}
        closeable={true}
        teleport={'body'}
      >
        <ul class={'box-list flex flex-wrap'}>
          {attrsOptions.map((item) => {
            return (
              <li
                class={includes(props.queryState.attrs, item) ? 'box-item active' : 'box-item'}
                onClick={() => {
                  attrsClick(item);
                }}
              >
                <span class={'text-xs'}>{item}</span>
              </li>
            );
          })}
        </ul>
      </Popup>
    );
  },
});
